<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图谱</title>
    <link rel="stylesheet" href="./style/company.css">
</head>

<body>
    <div id="app">
        <div id="container">
            <div id="graph-panel" ref="graphpanel" @contextmenu="globalClickedDispatch"></div>
            <div class="left-toolbar">
                <ul>
                    <li @click="setZoomOut" title="放大">
                        <i class="iconfont icon-zoomin"></i>
                    </li>
                    <li @click="setZoomIn" title="缩小">
                        <i class="iconfont icon-zoomout"></i>
                    </li>
                    <li @click="saveImage" title="保存图片">
                        <i class="iconfont icon-baocun-"></i>
                    </li>
                    <li @click="exportJson" title="导出JSON">
                        <i class="iconfont icon-json"></i>
                    </li>
                    <li @click="showOverView" title="缩略图">
                        <i class="iconfont icon-suolvetu" style="font-size: 14px"></i>
                    </li>
                    <li @click="clockwiseRotate" title="顺时针旋转">
                        <i class="iconfont icon-shunshizhenfangxiangclockwise4" style="font-size: 14px"></i>
                    </li>
                    <li @click="counterclockwiseRotate" title="逆时针旋转">
                        <i class="iconfont icon-nishizhencounterclockwise3" style="font-size: 14px"></i>
                    </li>
                    <li @click="setMouseModel('normal')" title="正常模式">
                        <i class="iconfont icon-pointer-up"></i>
                    </li>
                    <li @click="setMouseModel('drag')" title="拖拽模式">
                        <i class="iconfont icon-line-dragmovetuozhuai-01"></i>
                    </li>
                    <li @click="setMouseModel('select')" title="框选模式">
                        <i class="iconfont icon-kuangxuan1"></i>
                    </li>
                    <li @click="fullScreen" title="全屏显示">
                        <i class="iconfont icon-quanping" style="font-size: 20px"></i>
                    </li>
                </ul>
            </div>
            <div id="nodeMenuDialog" class="nodeMenuDialog">
                <ul>
                    <!-- <li @click="clickNodeInfo">节点信息</li> -->
                    <li @click="clickNodeDetails">详情</li>
                    <!-- <li @click="settingNode">配置节点</li> -->
                    <li @click="selectRelation">选中关联</li>
                    <li @click="deleteNode">删除节点</li>
                    <!-- <li @click="contractNode">收起节点</li>
                    <li @click="expandedNode">展开节点</li> -->
                </ul>
            </div>
        </div>
    </div>
    <script src="./js/vue.min.js"></script>
    <script src="./js/util.js"></script>
    <!-- <script src="./js/company.js"></script> -->
    <script type="text/javascript" src="./js/visgraph.min.js"></script>
    <script type="text/javascript" src="./js/visgraph-layout.min.js"></script>
    <script src="../config.js"></script>
    <script>
        var baseApi = window.g.baseURL;
        // var baseApi = 'http://192.168.31.84:8081/jqfx/';  // 杨-内网
        // var baseApi = 'http://192.168.31.27:8988/nm_jqfx_2_1/';  // 杨-内网
        var baseUrl = baseApi + '/series/detail/queryGraphNew';
        
        var access_token = localStorage.getItem('access_token');
      
        new Vue({
            el: '#app',
            name: "DesignGraph",
            data() {
                return {
                    // 画布实例
                    visgraph: null,
                    // 中心节点
                    centerNode: null,
                    centerValue:'',
                    // 已选中节点
                    currentNode: [],
                    // 选中节点信息
                    checkedNodeInfo: {},
                    // 图谱配置
                    config: {
                        node: {
                            label: {
                                show: true,
                                color: "250,250,250",
                                font: "normal 14px Microsoft YaHei",
                                textPosition: "Bottom_Center",
                                borderWidth: 0,
                                // wrapText: true,
                            },
                            shape: "circle",
                            width: 60,
                            height: 60,
                            color: "62,160,250",
                            borderColor: "62,160,250",
                            borderWidth: 0,
                            borderRadius: 0,
                            lineDash: [0],
                            alpha: 1,
                            selected: {
                                borderColor: "136,198,255",
                                borderAlpha: 1,
                                borderWidth: 3,
                                showShadow: true,
                                shadowColor: "136,198,255",
                            },
                            onClick: (event, node) => {
                                // this.visgraph.highLightNeiberNodes(node, 1) // 高亮
                                // window.parent.postMessage(node.properties,'*');
                            },
                            ondblClick: (event, node) => {
                                this.visgraph.restoreHightLight(); // 取消高亮
                                const allNodes = this.visgraph.getVisibleData();
                                this.currentNode.push(node.id);
                                allNodes.nodes.forEach((item) => {
                                    if (this.currentNode.indexOf(item.id) === -1) {
                                        this.visgraph.deleteNode(item);
                                    }
                                });
                                const findNodeNum = Math.round(Math.random() * 50);
                                const increamData = buildIncreamData(node, findNodeNum);

                                this.getGraphData({
                                        featureValue:node.properties.label,
                                        featureCode:node.properties.class,
                                },(data)=>{
                                    var newData = this.handleData(data);
                                    this.visgraph.activeAddNodeLinks(
                                        newData.nodes,
                                        newData.links
                                    );
                                    this.visgraph.translateToCenter();
                                })

                                // this.visgraph.activeAddNodeLinks(
                                //     increamData.nodes,
                                //     increamData.links
                                // );
                            },
                            onMouseOver: (event, node) => { },
                            onMouseOut: (event, node) => { },
                        },
                        link: {
                            label: {
                                show: true,
                                color: "230,230,255",
                                font: "normal 16px Arial",
                            },
                            lineType: "direct",
                            colorType: "defined",
                            color: "200,200,200",
                            alpha: 1,
                            lineWidth: 4,
                            lineDash: [0],
                            showArrow: true,
                            selected: {
                                color: "20,250,50",
                                alpha: 1,
                                lineWidth: 4,
                                showShadow: true,
                                shadowColor: "50,250,50",
                            },
                            onClick: (event, node) => {
                                // this.visgraph.highLightNeiberNodes(node, 1) // 高亮
                                window.parent.postMessage(node.properties,'*');
                            },
                        },
                        highLightNeiber: true,
                        wheelZoom: 0.8,
                        noElementClick: (event, _graphvis) => {
                            // 点击画布其他位置,弹框隐藏
                            this.nodeMenuDialogClose();
                        },
                    },
                    // 节点信息弹框
                    nodeInfoDrawer: false,
                    // 节点信息表单
                    nodeInfoForm: {
                        label: "",
                        id: "",
                    },
                    // 节点信息弹框tab选项名称
                    nodeInfoActiveName: "first",
                    // 关联关系
                    nodeInfoRelationActive: ["1", "2"],
                    // 目标节点列表
                    nodeInfoTargetList: [],
                    // 来源节点列表
                    nodeInfoSourceList: [],
                    // 节点属性列表
                    nodeInfoAttributeList: [],
                    // 节点配置弹框
                    nodeConfigDrawer: false,
                    // 节点配置表单
                    nodeConfigForm: {
                        label: "",
                        shape: "",
                        fillColor: "",
                        hexColor: "",
                        size: "",
                        borderWidth: "",
                        borderDash: "",
                        borderColor: "",
                        borderHexColor: "",
                        textPosition: "",
                        font: "",
                        fontColor: "",
                        fontHexColor: "",
                        fontBgColor: "",
                        fontBgHexColor: "",
                        textOffset: "",
                    },
                    // 节点类型列表
                    nodeTypeList: [
                        { value: "circle", label: "圆形" },
                        { value: "rect", label: "矩形" },
                        { value: "ellipse", label: "椭圆形" },
                        { value: "star", label: "五角形" },
                        { value: "triangle", label: "三角形" },
                        { value: "polygon", label: "六边形" },
                    ],
                    // 字体位置列表
                    textPositionList: [
                        { value: "Middle_Center", label: "居中" },
                        { value: "Bottom_Center", label: "底部" },
                        { value: "top_Center", label: "顶部" },
                        { value: "Middle_Left", label: "左方" },
                        { value: "Middle_right", label: "右方" },
                    ],
                };
            },
            mounted() {
               this.centerValue = decodeURI(decodeURI(getQueryString('featureValue')));
               this.getGraphData({
                    featureValue:this.centerValue ,
                    featureCode:getQueryString('featureCode'),
               },(data)=>{
                    var newData = this.handleData(data);
                    this.buildData(newData);
               })
              
                window.onresize = () => {
                    if (this.visgraph) {
                        this.visgraph.moveCenter();
                    }
                };
            },
            methods: {
                // 获取图数据
                getGraphData(params,callback){
                    window.parent.postMessage({loading:true,state:true},'*');
                    var formData = new FormData();
                    formData.append('featureValue', params.featureValue);
                    formData.append('featureCode', params.featureCode);
                    fetch(baseUrl,{
                        method: 'post',
                        headers: {
                            'auth_token':JSON.parse(access_token),
                        },
                        body:formData
                    }).then(function (response) {
                        return response.json();
                    }).then(res=> {
                        const {edgeList:edges,nodeList: nodes} = res.data;
                        callback && callback({nodes,edges})
                    }).catch(function (err) {
                        console.log('err=',err)
                    }).finally(f=>{
                        window.parent.postMessage({loading:true,state:false},'*');
                    })
                },
                /**
                 * 处理数据
                 * @date 2021-07-23
                 * @param {Object} data
                 */
                handleData(data) {
                    const obj = {
                        nodes: [],
                        links: [],
                    };
                    const styleMap = {
                        qq:{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        }, //QQ号
                        mail:{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        }, //邮箱
                        web:{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        }, //网站名
                        identifier :{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//身份证号
                        address :{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//地址
                        fraudAmount :{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//金额
                        wechat :{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//微信号
                        creditCard :{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//银行卡号
                        phoneNum :{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//手机号
                        name :{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//姓名
                        carinfo:{
                            color:'62,160,250',
                            selectedColor:'136,198,255',
                        },//车牌号
                    };

                    const nodes = data.nodes;
                    nodes.forEach((item) => {
                        if (item.label === this.centerValue) {
                            const nodeObj = {
                                id: item.id,
                                label: `${item.label} \n 警情数：${item.nodeCaseNum}  要素数：${item.nodeFeatureNum} 姓名：${item.personName}`,
                                properties: item,
                                color: "38,186,191",
                                selectedBorderColor: "131,218,228",
                                shadowColor: "131,218,228",
                            };
                            nodeObj.size = 80;
                            nodeObj.x = 250;
                            nodeObj.y = 250;
                            this.centerNode = nodeObj;
                            this.currentNode.push(item.id);
                        } else {
                            const nodeObj = {
                                id: item.id,
                                label: `${item.label} \n 警情数：${item.nodeCaseNum}  要素数：${item.nodeFeatureNum} 姓名：${item.personName}`,
                                properties: item,
                                size: 60,
                            };

                            const currentStyle = styleMap[item.class]
                            nodeObj.color = currentStyle.color;
                            nodeObj.selectedBorderColor = currentStyle.selectedColor;
                            nodeObj.shadowColor = currentStyle.selectedColor;
                            obj.nodes.push(nodeObj);
                        }
                    });
                    const links = data.edges;
                    links.forEach((item) => {
                        const linkObj = {
                            id: item.id,
                            target: item.target,
                            source: item.source,
                            label: item.caseNum,
                            properties: item,
                            strokeColor: getRandomColor(),
                        };
                        obj.links.push(linkObj);
                    });
                    return obj;
                },
                /**
                 * 搭建实例
                 * @date 2021-07-23
                 * @param {Object} gxData
                 */
                buildData(gxData) {
                    this.visgraph = new VisGraph(
                        document.getElementById("graph-panel"),
                        this.config
                    );
                    const nodeCount = gxData.nodes.length;
                    const xyArr = getXY(this.centerNode, nodeCount, nodeCount * 20);
                    gxData.nodes.forEach((n, i) => {
                        n.x = xyArr[i].x;
                        n.y = xyArr[i].y;
                        n.size = 60;
                    });
                    gxData.nodes.push(this.centerNode);
                    this.visgraph.drawData(gxData);
                    this.visgraph.setZoom();
                },

                /**
                 * 画布右键事件
                 * @date 2021-07-26
                 * @param {Object} event
                 */
                globalClickedDispatch(event) {
                    if (event.button === 2) {
                        if (this.visgraph.currentNode) {
                            this.nodeMenuDialogOpen(event, this.visgraph.currentNode);
                        }
                    }
                },
                /**
                 * 右键节点菜单显示
                 * @date 2021-07-26
                 * @param {Object} event
                 * @param {Object} node
                 */
                nodeMenuDialogOpen(event, node) {
                    let nodeMenuDialog = document.getElementById("nodeMenuDialog");
                    nodeMenuDialog.style.left = event.clientX + "px";
                    nodeMenuDialog.style.top = event.clientY - 76 + "px";
                    nodeMenuDialog.style.display = "block";
                    this.checkedNodeInfo = node;
                    event.stopPropagation();
                },
                /**
                 * 关闭节点菜单
                 * @date 2021-07-26
                 */
                nodeMenuDialogClose() {
                    let nodeMenuDialog = document.getElementById("nodeMenuDialog");
                    nodeMenuDialog.style.display = "none";
                },
                clickNodeDetails(){
                    this.nodeMenuDialogClose();
                    window.parent.postMessage(this.checkedNodeInfo.properties,'*');
                },
                /**
                 * 点击节点信息
                 * @date 2021-07-26
                 */
                clickNodeInfo() {
                    this.nodeInfoDrawer = true;
                    // 赋值表单
                    this.nodeInfoForm = this.checkedNodeInfo;
                    // 关联节点
                    // 出节点
                    const k = this.checkedNodeInfo;
                    const g = (k.outLinks || []).map((link) => {
                        return {
                            id: link.target.id,
                            label: link.target.label,
                            type: link.target.type,
                            color: "rgb(" + link.target.fillColor + ")",
                            relationType: link.type || link.label || "--",
                        };
                    });
                    // 入节点
                    const h = (k.inLinks || []).map((link) => {
                        return {
                            id: link.source.id,
                            label: link.source.label,
                            type: link.source.type,
                            color: "rgb(" + link.source.fillColor + ")",
                            relationType: link.type || link.label || "--",
                        };
                    });
                    this.nodeInfoTargetList = h;
                    this.nodeInfoSourceList = g;
                    // 属性赋值
                    const list = [];
                    const nameList = [
                        "id",
                        "label",
                        "type",
                        "cluster",
                        "fillColor",
                        "shape",
                        "size",
                        "font",
                        "fontColor",
                        "x",
                        "y",
                    ];
                    nameList.forEach((item) => {
                        const obj = {
                            name: item,
                            value: this.checkedNodeInfo[item],
                        };
                        list.push(obj);
                    });
                    this.nodeInfoAttributeList = list;
                    this.nodeMenuDialogClose();
                },
                /**
                 * 选中关联操作
                 * @date 2021-07-26
                 */
                selectRelation() {
                    this.visgraph.rightMenuOprate("selRelate");
                },
                /**
                 * 删除指定节点
                 * @date 2021-07-26
                 * @returns {any}
                 */
                deleteNode() {
                    this.visgraph.deleteNode(this.visgraph.currentNode);
                    this.nodeMenuDialogClose();
                },
                /**
                 * 收起指定节点
                 * @date 2021-07-26
                 * @returns {any}
                 */
                contractNode() {
                    if (this.visgraph.currentNode.outLinks.length > 0) {
                        this.visgraph.contract(this.visgraph.currentNode);
                        this.nodeMenuDialogClose();
                    } else {
                        this.$message.warning("当前节点无子节点,无法收起");
                    }
                },
                /**
                 * 展开指定节点
                 * @date 2021-07-26
                 * @returns {any}
                 */
                expandedNode() {
                    if (this.visgraph.currentNode.outLinks.length > 0) {
                        this.visgraph.expanded(this.visgraph.currentNode);
                        this.nodeMenuDialogClose();
                    } else {
                        this.$message.warning("当前节点无子节点,无法展开");
                    }
                },
                /**
                 * 以指定节点为中心移动
                 * @date 2021-07-26
                 * @param {String} id
                 */
                moveCenterThisNode(id) {
                    const node = this.visgraph.findNodeById(id);
                    this.visgraph.moveNodeToCenter(node);
                },
                /**
                 * 节点配置
                 * @date 2021-07-30
                 * @returns {any}
                 */
                settingNode() {
                    this.nodeMenuDialogClose();
                    const {
                        id,
                        label,
                        shape,
                        fillColor,
                        size,
                        borderWidth,
                        lineDash,
                        borderColor,
                        textPosition,
                        font,
                        fontColor,
                        labelBackGround,
                        textOffsetX,
                    } = this.visgraph.currentNode;
                    this.nodeConfigForm.id = id;
                    this.nodeConfigForm.label = label;
                    this.nodeConfigForm.shape = shape;
                    this.nodeConfigForm.fillColor = "rgb(" + fillColor + ")";
                    this.nodeConfigForm.hexColor = rgbToHex("rgb(" + fillColor + ")");
                    this.nodeConfigForm.size = size;
                    this.nodeConfigForm.borderWidth = borderWidth;
                    this.nodeConfigForm.borderDash = lineDash.length === 2;
                    this.nodeConfigForm.borderColor = "rgb(" + borderColor + ")";
                    this.nodeConfigForm.borderHexColor = rgbToHex("rgb(" + borderColor + ")");
                    this.nodeConfigForm.textPosition = textPosition;
                    this.nodeConfigForm.font = font;
                    this.nodeConfigForm.fontColor = "rgb(" + fontColor + ")";
                    this.nodeConfigForm.fontHexColor = rgbToHex("rgb(" + fontColor + ")");
                    this.nodeConfigForm.fontBgColor = labelBackGround
                        ? "rgb(" + labelBackGround + ")"
                        : "";
                    this.nodeConfigForm.fontBgHexColor = labelBackGround
                        ? rgbToHex("rgb(" + labelBackGround + ")")
                        : "";
                    this.nodeConfigForm.textOffset = textOffsetX;
                    this.nodeConfigDrawer = true;
                },
                /**
                 * 保存节点配置
                 * @date 2021-07-30
                 * @returns {any}
                 */
                saveSetting() {
                    const {
                        id,
                        label,
                        shape,
                        fillColor,
                        hexColor,
                        size,
                        borderWidth,
                        borderDash,
                        borderColor,
                        borderHexColor,
                        textPosition,
                        font,
                        fontColor,
                        fontHexColor,
                        fontBgColor,
                        fontBgHexColor,
                        textOffset,
                    } = this.nodeConfigForm;
                    const b = this.visgraph.findNodeByAttr("id", id);
                    if (b) {
                        b.label = label;
                        b.size = size;
                        b.shape = shape;
                        b.fillColor = getColorRgb(fillColor);
                        b.textPosition = textPosition;
                        b.fontColor = getColorRgb(fontColor);
                        b.labelBackGround = getColorRgb(fontBgColor);
                        b.font = font;
                        b.textOffsetY = Number(textOffset) || 2;
                        b.borderWidth = Number(borderWidth) || 2;
                        b.borderColor = getColorRgb(borderColor);
                        b.lineDash = borderDash ? [8, 5] : [0];
                        this.visgraph.refresh();
                        this.$message({
                            message: "修改配置成功!",
                            type: "success",
                            duration: 2000,
                        });
                        this.nodeConfigDrawer = false;
                    } else {
                        this.$message({
                            message: "无法找到选中节点!",
                            type: "error",
                            duration: 2000,
                        });
                    }
                },
                /**
                 * 颜色选择框变化赋值
                 * @date 2021-07-26
                 * @param {String} val
                 * @param {String} kay
                 */
                colorChange(val, key) {
                    this.nodeConfigForm[key] = hexToRgba(val);
                },

                /**
                 * 保存图片
                 * @date 2021-07-23
                 */
                saveImage() {
                    this.visgraph.saveImage();
                },
                /**
                 * 导出json
                 * @date 2021-07-30
                 */
                exportJson() {
                    this.visgraph.exportJsonFile();
                },
                /**
                 * 打开缩略图
                 * @date 2021-07-23
                 */
                showOverView() {
                    this.showOverViewFlag = !this.showOverViewFlag;
                    this.visgraph.showOverView(this.showOverView);
                },
                /**
                 * 缩小操作
                 * @date 2021-07-23
                 */
                setZoomIn() {
                    this.visgraph.setZoom("zoomIn");
                },
                /**
                 * 放大操作
                 * @date 2021-07-23
                 */
                setZoomOut() {
                    this.visgraph.setZoom("zoomOut");
                },
                /**
                 * 顺时针旋转
                 * @date 2021-07-23
                 */
                clockwiseRotate() {
                    this.visgraph.rotateGraph(-10);
                },
                /**
                 * 逆时针旋转
                 * @date 2021-07-23
                 */
                counterclockwiseRotate() {
                    this.visgraph.rotateGraph(10);
                },
                /**
                 * 设置鼠标模式
                 * @date 2021-07-23
                 * @param {String} type  drag：拖动模式  select：框选模式   normal：正常模式
                 */
                setMouseModel(type) {
                    this.visgraph.setMouseModel(type);
                },
                /**
                 * 全屏显示
                 * @date 2021-07-23
                 */
                fullScreen() {
                    screenfull.request(this.$refs.graphpanel);
                },
            },
        });
    </script>

</body>
</html>